<template>
<div class="photoinfo-contain"> 
  <!-- 标题 -->
  <h3 class="photoinfo-title">{{title}} </h3>
  <!-- 子标题 -->
  <p class="photoinfo-subtitle">
    <span>发表日期：{{photolist.add_time|dateFormat}}</span>
    <span>点击数：{{photolist.click}}次</span>
  </p>
  <!-- 分割线 -->
  <hr>
  <!-- 缩略图 -->
  <div class="thumbs">
    <vue-preview :slides="list" @close="handleClose"></vue-preview>
  </div>

  <!-- 文字内容 -->
  <div class="photoinfo-content" v-html="photolist.content">
   
  </div>
  <!-- 评论子组件 -->
  <cmtbox :id="id"></cmtbox>
</div>
</template>

<script>

//1 引入评论子组件comment
import comment from '../subcomponents/Comment.vue'
import {Toast} from 'mint-ui'
export default {
  data(){
    return {
      id:this.$route.params.id,//获取路由参数id
      title:this.$route.params.title,
      //获取路由传过来的标题,由于使用了缩略图，vue-preview会在路由的末尾添加&gid=1&pid=1，因此用split分割后取0.
      //但是，经过关闭编译，后重新npm run dev编译后，该&gid=1&pid=1并未在路由中显示出来，因此，挂载了vue-preview要重新编译。
     //原来写的.split('&')[0]不用清除掉，这样可以防止编译过程中出现的问题，也不影响显示。
     photolist:{},//从后台获取的数据，一个对象
      list:[],//获取缩略图的数组
    }
  },
  created(){
    console.log(this.title.split('&')[0])
    
    // 请求的图片信息
    this.getImageInfo()
    // 请求的缩略图
    this.getImageThumbs()
    
  },
  
 
  methods:{
    //获取图片详情数据（不含缩略图数据）
    getImageInfo(){
      this.$axios.get('/getimageInfo/'+this.id).then(res=>{
        if(res.data.status===0){
          this.photolist=res.data.message.filter(item=>item.id=this.id)[0]
          
        }else{
          Toast('怎么没有了,不可能的。。。')
        }
      }).catch(err=>Toast('无法连接服务器'+err))
    },
    //获取图片缩略图数据
    getImageThumbs(){
      this.$axios.get('/getthumimages/'+this.id).then(res=>{
        if(res.data.status===0){
          var tmp=res.data.message.filter(item=>item.id=this.id)[0].img
          //对缩略图的tmp循环，定制缩略图组件vue-preview需要的属性，添加缩略图打开后的w和h和缩略图的链接msrc
          tmp.forEach(item => {
            item.w=600
            item.h=400
            item.msrc=item.src
            item.alt=item.src
          })
          this.list=tmp
          console.log(this.list)
        }else{
          Toast('怎么没有了,不可能的。。。')
        }
      }).catch(err=>Toast('无法连接服务器'+err))
    },
    //定义vue-preview的关闭事件方法
    handleClose(){
      console.log('close event')
    }
  },
  components:{
    'cmtbox':comment,
  }
}
</script>

<style lang='scss' >
.photoinfo-contain{
   padding: 5px;
  .photoinfo-title{
    font-size: 16px;
    color:blue;
    text-align: center;
    margin: 10px;

  }
  .photoinfo-subtitle{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  /*定义缩略图样式*/
  .thumbs{
    .my-gallery{
      display: flex;
      flex-wrap: wrap;
      figure{
        margin: 10px;
        img{
          width:50px;
          height: 60px;
          box-shadow: 0 0 8px #999;
        }
      }
      
    }
    
  }
  //图文详情中图片，不是缩略图的图片样式
  .photoinfo-content{
    img{
      width: 100%;
    }
  }
}
</style>